<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.left{
				width: 200px;
				height: 200px;
				background: red;
				float: left;
				margin-left:-100%;
				position: relative;
				left: -200px;
				
				
			}
			.right{
				width: 200px;
				height: 200px;
				background: blue;
				float: left;
				margin-left: -200px;
				position: relative;
				left: 200px;
			}
			.center{
				width: 100%;
				height: 200px;
				background: green;
				float: left;
			}
			.box{
				background: purple;
				padding: 0 200px;
				/* 方便观察 先清除浮动 */
				overflow: hidden;
				min-width: 500px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 1.什么是圣杯布局和双飞翼布局
		 两个实现的功能都一样，都是用于实现两侧宽度不变，中间宽度自适应的三栏布局
		 2.圣杯布局的步骤
		 2.1 搞一个容器 里面放三个盒子
		 2.2 设置两侧盒子的固定宽度
		 2.3 设置中间盒子的宽度等于100%
		 2.4 设置容器的padding等于两侧盒子的宽度
		 2.5 让三个盒子都在同一个方向上浮动
		 2.6 设置左边盒子的margin-left =-100%
		 2.7 通过定位调整左边的盒子 让左边的盒子不要盖住中间的区域
		 2.8 设置右边盒子的margin-left为 -自身的宽度
		 2.9 通过定位调整右边的盒子 让右边的盒子不要盖住中间的区域
		 3.0 给容器设置一个最小的宽度 防止缩小后变形
		 -->
		
		
		
		<div class="box">
			<div class="center"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>